
import { Component , createRef, Fragment} from "react";

export default class Register extends Component {
    state = {
        username: '',
        introduce: ''
    }
    constructor(props) {
        super(props);
        this.usernameRef = createRef();
        this.introduceRef = createRef();
        this.buttonRef = createRef();
    }
    componentDidMount(){
        let btn = this.buttonRef.current ;
        btn.addEventListener( 'click' , e => {
            let username = this.usernameRef.current.value ;
            let introduce = this.introduceRef.current.value ;
            this.setState({
                username,
                introduce
            });
        } , false );
    }
    componentWillUnmount(){
        let btn = this.buttonRef.current ;
        btn.removeEventListener( 'click' );
    }
    render() { 
        const { username , introduce } = this.state ;
        return (
            <Fragment>
                <form action="" method="">
                    <div>
                        {/* label 的 for 要用 htmlFor 来替代 */}
                        <label htmlFor="username">用户名:</label>
                        <input type="text" id="username" ref={this.usernameRef} />
                    </div>
                    <div>
                        <label htmlFor="introduce">自我介绍:</label>
                        <textarea id="introduce" ref={this.introduceRef}></textarea>
                    </div>
                    <hr />
                    <div>
                        <button type="button" ref={this.buttonRef}>发送</button>
                    </div>

                </form>
                <ul>
                    <li>用户名: {username}</li>
                    <li>自我介绍: {introduce}</li>
                </ul>
            </Fragment>
        );
    }
}

// createRef 与 useRef 有什么区别？